<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            background-color: #363636;
            gap: 100px;
        }
        .card {
            position: relative;
            font-size: 36px;
            font-weight: bold;
            font-family: fantasy;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
            border: 2px solid #111;
            border-radius: 20px;;
            color: var(--clr);
            transition: .25s;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card" style="--clr:#ff6464;">01</div>
        <div class="card" style="--clr:#64c0ff;">02</div>
        <div class="card" style="--clr:#48e365;">03</div>
        <div class="card" style="--clr:#cb4af7;">04</div>
    </div>
</body>
<script>
    let cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.lastMouseX = 0;
        card.lastMouseY = 0;
        card.isMoving = false;
        card.addEventListener('mousemove', () => {
            card.lastMouseX = event.offsetX;
            card.lastMouseY = event.offsetY;
            card.isMoving = true;
        })
        card.addEventListener('mouseleave', () => {
            card.isMoving = false;
        })
    })


    function animate() {
        requestAnimationFrame(animate);
        cards.forEach(card => {
            if (card.isMoving) {
                const cardWidth = card.clientWidth;
                const cardHeight = card.clientHeight;
                const transX = (card.lastMouseX - cardWidth / 2) / 2;
                const transY = (card.lastMouseY - cardHeight / 2) / 2;
                card.style.transform = `translate(${transX}px, ${transY}px)`;
                card.style.boxShadow = `${transX / -1}px ${transY / -1}px 0 #0005`;
            } else {
                card.style.transform = ``;
                card.style.boxShadow = ``;
            }
        })
    }

    animate()
</script>
</html>